<template>
	<view class="container b-f p-b">
		<view class="article-title">
			<text class="f-32">{{ detail.article_title }}</text>
		</view>
		<view class="article-little dis-flex flex-x-between m-top10">
			<view class="article-little__left">
				<text class="article-views f-24 col-8">{{ detail.show_views }}次浏览</text>
			</view>
			<view class="article-little__right">
				<text class="article-views f-24 col-8">{{ detail.view_time }}</text>
			</view>
		</view>
		<view class="article-content m-top20"><u-parse :html="detail.article_content" :autosetTitle="false" :lazy-load="true"></u-parse></view>
		<!-- 快捷导航 -->
		<shortcut></shortcut>
	</view>
</template>

<script>
import shortcut from '@/components/shortcut/shortcut.vue';
import Tools from '@/utils/Tools.js';
export default {
	components: {
		shortcut
	},
	data() {
		return {
			detail: {},
			content: ''
		};
	},
	onLoad(options) {
		this.getArticleDetail(options.article_id);
	},
	methods: {
		/**
		 * 获取文章详情
		 */
		getArticleDetail(article_id) {
			this.$u.api.getArticleInfo(article_id).then(res => {
				this.detail = res.data.detail;
				this.content = Tools.formatRichText(this.detail.article_content);
				uni.setNavigationBarTitle({
					title: res.data.detail.article_title
				});
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}
.container {
	padding: 20rpx;
	.article-content {
		font-size: 28rpx;
	}
}

.wxParse-img {
	width: 708rpx;
}
</style>
